<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子传值-子组件向父组件传值</title>
    <style> /*样式*/
    .box {
        width: 100px;
        height: 100px;
        background-color: greenyellow;
        text-align: center;
        line-height: 100px;
    }


    </style>

</head>
<body>

<div id="app">
    <box @content="getContent"></box>
    <hr>
    {{message}}
</div>

</body>
<script src="../../../lib/vue.global.js"></script>

<script type="module">

     import  box from '../js/component/box2.js'


    const createApp=Vue.createApp;

    createApp({
        components:{
             box
        },data(){
             return{
                 message:'outer'
             }
        },methods:{
            getContent(val){ //回调函数
                 this.message=val;
             }
        }
    }).mount('#app')


</script>





</html>